<template>
  <div>
    <div class="step" v-for="(item, index) in steps" :key="index">
      <div class="title">{{ item.title }}</div>
      <Steps :current="item.step.length">
        <Step v-for="(step, ind) in item.step" :key="ind" :title="step.title" :content="step.description"></Step>
      </Steps>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      steps: [
        {
          title: '自动审批',
          step: [
            { title: '开始', description: '表单负责人发起表单填报工作' },
            { title: 'BU填报', description: '各BU填写表单' },
            { title: '结束', description: '自动审批结束' }
          ]
        },
        {
          title: '一轮业务审批',
          step: [
            { title: '开始', description: '表单负责人发起表单填报工作' },
            { title: 'BU填报', description: '各BU填写表单' },
            { title: '审批', description: '一轮业务审批' },
            { title: '结束', description: '结束' }
          ]
        },
        {
          title: '二轮业务审批',
          step: [
            { title: '开始', description: '表单负责人发起表单填报工作' },
            { title: 'BU填报', description: '各BU填写表单' },
            { title: '审批节点1', description: '第一轮业务审批' },
            { title: '审批节点2', description: '第二轮业务审批' },
            { title: '结束', description: '结束' }
          ]
        },
        {
          title: '三轮业务审批',
          step: [
            { title: '开始', description: '表单负责人发起表单填报工作' },
            { title: 'BU填报', description: '各BU填写表单' },
            { title: '审批节点1', description: '第一轮业务审批' },
            { title: '审批节点2', description: '第二轮业务审批' },
            { title: '审批节点3', description: '第三轮业务审批' },
            { title: '结束', description: '结束' }
          ]
        }
      ]
    }
  },
  created() {
    this.$emit('SetTitle', '流程模板预览')
    this.$emit('SetPageWidth', 1000)
  }
}
</script>

<style lang="less" scoped>
.step {
  border: 1px solid #ccc;
  padding: 15px 20px;
  .title {
    font-size: 18px;
    color: #f89c34;
    margin-bottom: 15px;
  }
}
</style>
